<!--
    Powered By nodeppt - This is probably the best web presentation tool so far!
    version: 1.4.4
    site: https://github.com/ksky521/nodeppt
    date: 
-->
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MediaStream - By 小牛仔</title>
    <link rel="stylesheet" media="all" href="./css/nodeppt.css">
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="./css/phone.css">
    
    <link rel="stylesheet" href="./js/highlight/styles/monokai_sublime.css">
    <link rel="stylesheet" href="./css/font-awesome.css">
    
<link rel="stylesheet" href="./css/theme.moon.css">
</head>
<body>
<div class="slides">
    <slides id="container">
        <slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>MediaDevices</h1>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<h2>捕获视频/音频</h2>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<p>长久以来，音频/视频捕获都是网络开发中的“圣杯”</p>
<p>（<a href="http://www.kevinmusselman.com/2009/02/access-webcam-with-flash/" target="_blank">Flash</a> 或 <a href="http://www.silverlightshow.net/items/Capturing-the-Webcam-in-Silverlight-4.aspx" target="_blank">Silverlight</a>）</p>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<p>依靠 <a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html" target="_blank">WebRTC</a>（网络即时通信）的大力协助，寻找合适捕获 API 的步伐加快了很多。</p>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>WebRTC</h1>
<p>网页实时通信（Web Real-Time Communication）谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项技术</p>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<img src="" alt="">
<p><a href="https://young-cowboy.github.io/gallery/mediadevices/" target="_blank">https://young-cowboy.github.io/gallery/mediadevices/</a></p>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<pre><code class="html">&lt;style&gt;
  #video{
    width: 320px;
    height: 180px;
    background-color: #000000;
  }
&lt;/style&gt;

&lt;video id=&quot;video&quot; autoplay=&quot;autoplay&quot; controls=&quot;controls&quot;&gt;&lt;/video&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
  navigator
    .mediaDevices
    .getUserMedia({video: true, audio: true})
    .then(function(mediaStream) {
      var video = document.querySelector(&#39;video&#39;);

      video.srcObject = mediaStream;
      video.onloadedmetadata = function(e) {
        video.play();
      };
    })
    .catch(function(error) {
      console.log(error);
    });
&lt;/script&gt;
</code></pre>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<h2>MediaDevices.getUserMedia()</h2>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<p>允许使用一个视频和/或一个音频输入设备</p>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>安全限制</h1>
<h2>HTTPS协议 or file协议</h2>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>支持的约束条件</h1>
<p>getSupportedConstraints</p>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<pre><code class="javascript">navigator
  .mediaDevices
  .getSupportedConstraints()
</code></pre>
<p>constraints 参数是一个包含了video 和 audio两个成员的
MediaStreamConstraints 对象，用于说明请求的媒体类型。</p>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<pre><code class="json">{
  &quot;aspectRatio&quot;: true, //采集比例
  &quot;channelCount&quot;: true,
  &quot;deviceId&quot;: true,
  &quot;echoCancellation&quot;: true,
  &quot;facingMode&quot;: true,
  &quot;frameRate&quot;: true,
  &quot;groupId&quot;: true,
  &quot;height&quot;: true,
  &quot;latency&quot;: true, //延迟
  &quot;sampleRate&quot;: true,
  &quot;sampleSize&quot;: true,
  &quot;volume&quot;: true,
  &quot;width&quot;: true
  ......
</code></pre>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>收集系统上可用的多媒体输入和输出设备的信息</h1>
<h2>enumerateDevices</h2>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<pre><code class="javascript">navigator
  .mediaDevices
  .enumerateDevices()
  .then(res =&gt; console.log(res))
</code></pre>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<pre><code class="json">[
  {
    &quot;deviceId&quot;: &quot;default&quot;,
    &quot;kind&quot;: &quot;audioinput&quot;,
    &quot;label&quot;: &quot;Default&quot;,
    &quot;groupId&quot;: &quot;50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4&quot;
  },
  {
    &quot;deviceId&quot;: &quot;e38a9b92758f008e71510a95aa36957553e2a5ce7febc6e4bcd57798807c1519&quot;,
    &quot;kind&quot;: &quot;audioinput&quot;,
    &quot;label&quot;: &quot;Built-in Microphone&quot;,
    &quot;groupId&quot;: &quot;50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4&quot;
  },
  {
    &quot;deviceId&quot;: &quot;5013c01eb0a704c09d15aa668601f8dfb80f1a33d179b2adcbb64a8fbad5fc62&quot;,
    &quot;kind&quot;: &quot;videoinput&quot;,
    &quot;label&quot;: &quot;FaceTime HD Camera&quot;,
    &quot;groupId&quot;: &quot;&quot;
  },
  {
    &quot;deviceId&quot;: &quot;default&quot;,
    &quot;kind&quot;: &quot;audiooutput&quot;,
    &quot;label&quot;: &quot;Default&quot;,
    &quot;groupId&quot;: &quot;50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4&quot;
  },
  {
    &quot;deviceId&quot;: &quot;ba0bb7502f314e3ad61511aa6468c6a48ec679e34e5ebd975852db1d8d3ab3e7&quot;,
    &quot;kind&quot;: &quot;audiooutput&quot;,
    &quot;label&quot;: &quot;Built-in Output&quot;,
    &quot;groupId&quot;: &quot;50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4&quot;
  }
]
</code></pre>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><article>
<h2>参考资料</h2>
<ul>
<li><a href="https://www.html5rocks.com/zh/tutorials/getusermedia/intro/" target="_blank">Capturing Audio &amp; Video in HTML5</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia" target="_blank">getUserMedia</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/enumerateDevices" target="_blank">enumerateDevices</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getSupportedConstraints" target="_blank">getSupportedConstraints</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSupportedConstraints" target="_blank">MediaTrackSupportedConstraints</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints#Example_Constraint_exerciser" target="_blank">Capabilities, constraints, and settings</a></li>
</ul>

</article></section></slide>
        

        <!-- <slide class="slide logoslide dark nobackground">
            <article class="flexbox vcenter">
                <h2 style="color: white;">Powered By nodeppt v1.4.4</h2>
            </article>
        </slide> -->
        <div class="slideTip" id="tip"></div>
    </slides>
</div>
<canvas id="drawBoard" class="draw-board" width="900" height="700"></canvas>
<div class="progress"><span id="progress"></span></div>
<div id="_buttons">
    <div class="_btn-box" id="_btn-box" style="display:none;">
        <button class="fa fa-arrow-circle-left" id="_btn-prev"></button>
        <button class="fa fa-arrow-circle-right" id="_btn-next"></button>
        <button class="fa fa-paint-brush" id="_btn-brush"></button>
        <button class="fa fa-compress" id="_btn-overview" data-toggle="fa fa-expand"></button>
    </div>
    <button class="fa fa-bars" id="_btn-bar"  data-toggle="fa fa-close"></button>
</div>
<script src="./js/mixjs/lib/mix.0.3.0.min.js"></script>
<script>
    var ASSET_RELATIVE_DIR = ".";
</script>
<script>
var base = location.protocol + '//' + location.host;

var path = (location.pathname + '#').split('/').filter(function(v){
    return !!v;
});
path.pop();
path = path.join('/');
if (typeof ASSET_RELATIVE_DIR === 'string') {
    path = path + '/' + ASSET_RELATIVE_DIR;
}
MixJS.config({
    baseURL: [ base, path, 'js'].join('/')+'/'
});

</script>
<script src="./js/mixjs/lib/event/broadcast.js"></script>
<script src="./js/nodeppt.js"></script>
<script>
Slide.init({
    containerID: 'container',
    drawBoardID: 'drawBoard',
    slideClass: '.slide',
    buildClass: '.build',
    progressID: 'progress',
    transition: 'move',
    width: 1100,
    dir: './',
    
    //打开下面的注释就开启postMessage方式
    //访问网址127.0.0.1:8080/ppt/demo#client
    control:{
        type: 'postMessage',
        args:{
            isControl:  false
        }
    },
    
    tipID: 'tip'
});
MixJS.loadJS('highlight/highlight.pack.js',function(){
    hljs.tabReplace = '  ';
    hljs.initHighlightingOnLoad();
});
</script>


<!--placeholder-->
</body>
</html>
